<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <table>
    <tr>
      <th>#</th>
      <th>日期</th>
      <th>身高</th>
      <th>体重</th>
      <th>BMI</th>
      <th>操作</th>
    </tr>
    </tr>
    <tr v-if="list.length === 0">
      <td colspan="5">暂无数据</td>
    </tr>
    <tr v-else v-for="(item, index) of list">
      <td>{{index + 1}}</td>
      <td>{{ item.height }}</td>
      <td>{{ item.weight }}</td>
      <td>{{ item.bmi }}</td>
      <td>
        <a @click="delItem(item.objectId)" href="javascript:void(0)">删除</a>
      </td>
    </tr>
  </table>
</div>

<script src="vue.js"></script>
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<script>

  const app = new Vue({
    data: {
      list: []
    },
    created() {
      /*fetch('https://veihwwnelcwq.leanapp.cn/bmi')
        .then(res => res.json())
        .then(res => {
          this.list = res.data
        })*/
      this.getList()
    },
    methods: {
      getList() {
        fetch('https://veihwwnelcwq.leanapp.cn/bmi')
          .then(res => res.json())
          .then(res => {
            this.list = res.data
          })
      },
      delItem(id) {

        /*axios({
          method: 'DELETE',
          url: 'https://veihwwnelcwq.leanapp.cn/bmi',
          data: {
            id
          }
        }).then(res => {
          console.log(res)
        })*/

        fetch('https://veihwwnelcwq.leanapp.cn/bmi', {
          method: 'DELETE',
          headers: {
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            id: id
          })
        })
          .then(res => res.json())
          .then(res => {
            this.getList()
            // console.log(res)
          })
      }
    }
  }).$mount('#app')
</script>
</body>
</html>